<template>
  <div>
    <!--搜索过滤-->
    <el-form :model="filterData" size="mini">
      <el-row :gutter="15">

        <el-col style="width: 180px;">
          <el-form-item>
            <el-select v-model="filterData.platformtype" placeholder="产品渠道" clearable style="width: 100%;">
              <el-option label="京东自营" value="京东自营"></el-option>
              <el-option label="京东慧采" value="京东慧采"></el-option>
              <el-option label="政采云" value="政采云"></el-option>
              <el-option label="军网" value="军网"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width:240px">
          <el-form-item>
            <el-input v-model="filterData.sn"  placeholder="产品SN编码"    style="width: 100%;">  </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width:200px">
          <el-form-item>
            <el-input placeholder="商品名称" v-model="filterData.title" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 180px;">
          <el-form-item>
            <el-input placeholder="客户" v-model="filterData.client" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 400px;">
          <el-form-item>
            <div style="display: flex;">
              <div style="line-height: 25px; margin-right: 10px;">
                <el-input placeholder="低价" style="width: 90px; " v-model="filterData.lprice" clearable></el-input> -
                <el-input placeholder="高价" style="width: 90px;" v-model="filterData.hprice" clearable></el-input>
              </div>
              <div>
                <el-radio-group v-model="filterData.sorttype" @change="handleSortChanged" style="display: flex;">
                  <el-radio-button label="默认">默认</el-radio-button>
                  <el-radio-button label="降序">降序</el-radio-button>
                  <el-radio-button label="升序">升序</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col  style="width: 180px;">
          <el-form-item >
            <el-input placeholder="备注信息" v-model="filterData.memo" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 100px;">
          <el-form-item >
            <el-button type="primary" icon="el-icon-search" @click="curpage=1;loadDataList()">搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-bottom: 10px;">
      <div style="display: flex;">
        <div style="flex: 1;">
          <el-button-group>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleImportGood" v-if="false">导入京东商品</el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleCreateGood">新增商品</el-button>
          <el-button type="primary" size="mini" icon="el-icon-goods" :disabled="selection.length<=0" @click="handleNewOrder">创建新订单</el-button>

          </el-button-group>
        </div>
        <div >
          <div style="height:30px;line-height: 30px; color:#909399;padding-left:10px;">提示: <span
              style="color:#67C23A">绿色编码</span>商品为供应商上架产品</div>
        </div>
      </div>
    </div>

    <CreateUI v-if="createVisible" ref="createUI" @closeHandler="createCompleteCallback"></CreateUI>
    <EditUI v-if="editVisible" ref="editUI" @closeHandler="editCompleteCallback"></EditUI>
    <ImportUI v-if="importVisbile" ref="importUI"></ImportUI>

    <NewOrder v-if="newOrderVisbile" ref="newOrderUI"></NewOrder>
    <div class="table-wraper">
      <el-table :data="tableData" border height="100%" style=" overflow-y: auto;"
        :header-cell-style="{'background-color': '#f5f7f9','color':'#666',border:'1px solid #f0f0f0'}"
        @selection-change="handleTableSelect">
        <el-table-column prop="id" label="id" v-if="false"></el-table-column>

        <el-table-column type="index" label="序号" width="80" align="center">
          <template v-slot="scope">
            {{scope.$index+(curpage-1)*pagesize+1}}
          </template>
        </el-table-column>
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="cover" label="图片" width="50" align="center">
          <template v-slot="scope" style="text-align: center;">
            <div style="width: 25px; height:25px; background-color: #EEEEEE; cursor: pointer;"
              @click="openlink(scope.index,scope.row)">
              <el-popover placement="right-end" trigger="hover">
                <div style="width: 180px; border: 1px solid #aaaaaa; border-radius: 10px; padding: 10px;">
                  <img :src="scope.row.cover" style="width: 100%;" fit="cover" />
                  <div style="background-color: rgba(0,0,0,0.5);color:#FFFFFF;padding: 10px;">
                    {{scope.row.title}}
                  </div>
                  <label></label>
                </div>
                <img slot="reference" :src="scope.row.cover" style="width: 100%;heigt:100%" />
              </el-popover>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="sn" label="商品编码" width="170px" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.sn && scope.row.custom!=1">{{scope.row.sn}}</span>
            <span v-if="scope.row.sn && scope.row.custom==1" style="color:#67C23A;">{{scope.row.sn}}</span>
            <span style="margin-left: 5px;">
              <i class="el-icon-link" title="打开上架链接"  style="cursor: pointer;" @click="handleOpenLink(scope.$index,scope.row)"></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="platformtype" label="渠道名称" width="120px" align="center"> </el-table-column>
        <el-table-column prop="brand" label="品牌" show-overflow-tooltip></el-table-column>
        <el-table-column prop="title" label="商品名称" width="240px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model" label="规格型号" width="150px" show-overflow-tooltip></el-table-column>
        <el-table-column label="单位" width="65" align="center" show-overflow-tooltip>
          <template v-slot="scope">
            {{scope.row.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="90" align="center"></el-table-column>
        <el-table-column prop="client" label="客户" width="100" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="memo" label="备注"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" width="90" align="center" v-if="false">
          <template v-slot="scope">
            <span v-if="scope.row.status==0">下架</span>
            <span v-if="scope.row.status==1">上架</span>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="上架时间" width="90px" align="center">
          <template v-slot="scope">
            {{scope.row.createtime.substring(0,scope.row.createtime.indexOf(' '))}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 10px; text-align: right;  display: flex;">

      <div style="flex: 1;">
        <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
          layout=" prev, pager, next,sizes,total" :page-sizes="[25, 50, 80]" :total="total" :page-size="pagesize"
          :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

  </div>

</template>

<script>
  import EditUI from './Edit.vue';
  import CreateUI from './Create.vue';
  import NewOrder from './neworder.vue';
  import ImportUI from './ImportGood.vue';
  export default {
    components: {
      EditUI,
      CreateUI,
      NewOrder,
      ImportUI
    },
    data() {
      return {
        curpage: 1,
        pagesize: 25,
        total: 1,
        sn_option: [],
        filterData: {
          sn: "",
          title: '',
          sorttype: "默认",
          hprice: '',
          lprice: '',
          platformtype: '',
          supname: '',
          client: '',
          memo: '',
          listsn: []
        },
        suppliers:[],
        selection: [],
        platforms: [],
        tableData: [],
        editVisible: false,
        createVisible: false,
        viewVisible: false,
        newOrderVisbile: false,
        importVisbile:false,
      }
    },
    mounted() {
      this.loadDataList();
    },
    methods: {
      handleImportGood(){
        this.importVisbile=true;
        this.$nextTick(()=>{
          this.$refs.importUI.dialogVisible=true;
        })

      },
      handleOpenLink: function(index, row) {
        console.log(row);
        if(row.platformtype.indexOf("企业")!=-1){
            console.log("企业");
        }else if(row.platformtype.indexOf("政采云")!=-1){
           window.open("https://www.jc.zcygov.cn/items/"+row.sn,"_blank");
            console.log("zcy");
        }else if(row.platformtype.indexOf("京东")!=-1 ){
            window.open("https://item.jd.com/"+row.sn+".html","_blank");
        }else if(row.platformtype.indexOf("军网")!=-1){
           window.open("https://apigw.officemate.cn/newjdw/ecservice/selectMallProductInfo?sku="+row.guid,"_blank");

        }
      },
      handleTableSelect: function(selection) {
        this.selection = selection;
      },
      handleNewOrder: function() {
        let sameplatform = true;
        //检测产品是为同一平台
        let pid = -1;
        let same = true;
        this.selection.map(item => {
          if (pid == -1) {
            pid = item.platformid;
          }
          if (pid != item.platformid) {
            same = false;
          }
        });
        if (!same) {
          this.$message.error({
            message: '所选商品只能来自同一个平台！',
            showClose: true,
            duration: 1500
          });
          return;
        }

        this.newOrderVisbile = true;
        this.$nextTick(() => {
          this.$refs.newOrderUI.dialogVisible = true;
          this.selection.forEach((item)=>{
            item.count=1;
          });

          this.$refs.newOrderUI.init(this.platforms,this.suppliers,this.selection);
        });
      },
      handleCreateGood: function() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
          this.$refs.createUI.init();
        })
      },
      createCompleteCallback: function() {
        this.curpage = 1;
        this.loadDataList();
      },
      openlink: function(index, row) {
        window.open("https://item.jd.com/" + row.sn + ".html");
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = val;
        this.loadDataList();
      },
      loadDataList: function() {
        let params = {
          sn: this.filterData.sn,
          title: this.filterData.title,
          brand: this.filterData.brand,
          sorttype: this.filterData.sorttype == '默认' ? '' : this.filterData.sorttype == "降序" ? "desc" : "asc",
          hprice: this.filterData.hprice,
          lprice: this.filterData.lprice,
          curpage: this.curpage,
          platformtype: this.filterData.platformtype,
          pagesize: this.pagesize,
          supname: this.filterData.supname,
          client: this.filterData.client,
          memo: this.filterData.memo
        }
        this.axios.post("/api/supplier/product/list", params).then((res) => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
            this.curpage = res.data.curpage;
            this.total = res.data.total;
            this.pagesize = res.data.pagesize;
          }
        })
      },
      handleSortChanged: function(v) {
        this.filterData.sorttype = v;
        //this.curpage=1;
        this.loadDataList();
      },
      handleEdit: function(index, row) {
        console.log(index, row);
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.initData(index, row);
        })
      },
      editCompleteCallback: function(index, data,thumbs,zizhi) {
        this.tableData[index].client = data.client;
        this.tableData[index].platform = data.platform;
        this.tableData[index].platformid = data.platformid;
        this.tableData[index].title = data.title;
        this.tableData[index].unit = data.unit;
        this.tableData[index].sn = data.sn;
        this.tableData[index].price = data.price;
        this.tableData[index].supid = data.supid;
        this.tableData[index].params = data.params;
        this.tableData[index].supname = data.supname;
        this.tableData[index].cover = data.cover;
        this.tableData[index].cklink = data.cklink;
        this.tableData[index].brand = data.brand;
        this.tableData[index].model = data.model;
        this.tableData[index].zizhi=zizhi;
        this.tableData[index].thumbs=thumbs;

      },
      handleDelete: function(index, row) {
        let confirmText = ["正在删除上架记录，请仔细核对信息:", "【" + row.title + "】", "价格:" + row.price, "申请供应商: " + row
          .supname
        ];
        const newDatas = [];
        const h = this.$createElement;
        for (const i in confirmText) {
          newDatas.push(h('p', null, confirmText[i]));
        }
        this.$confirm("提示", {
          message: h('div', null, newDatas),
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: 'error'
        }).then(() => {
          this.axios.post("/api/admin/product/remove", {
            id: row.id
          }).then(res => {
            if (res.status == 200 && res.data.code == 0) {
              this.$message.success(res.data.msg, "提示");
              this.tableData.splice(index, 1);
            } else {
              this.$alert(res.data.msg, "提示", {
                type: "error"
              });
            }
          })
        }).catch(() => {})
      },
    }

  }
</script>

<style scoped>
  .el-form-item--small.el-form-item {
    margin-bottom: 5px;
  }

  .table-wraper {
    height: calc(100vh - 260px);
  }
</style>
